<template>
	<view class="header">
		<view class="info">
			<view class="avatar">
				<image :src="career_avatar"></image>
			</view>
			<view class="name">{{career_text}}</view>
		</view>
		<view class="weather">
			<image :src="img"></image>
			<text>{{name}}</text>
		</view>
	</view>
</template>

<script>
	import {
		career
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				career_avatar: "",
				career_text: "",

				img: "",
				name: "",

			}
		},
		watch: {
			'$store.state.disaster': {
				handler(new_val) {
					this.img = this.$store.state.disaster.img;
					this.name = this.$store.state.disaster.name;
					let key = this.$store.state.info.role_id;
					const item = career[key];
					this.career_avatar = item.avatar;
					this.career_text = item.name;
				},
				deep: true
			}
		},
		created() {
			// this.img = this.$store.state.disaster.img;
			// this.name = this.$store.state.disaster.name;

			// let key = this.$store.state.info.role_id;
			// const item = career[key];
			// this.career_avatar = item.avatar;
			// this.career_text = item.name;
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		height: 108rpx;
		padding: 60rpx 20rpx 0;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/home/top_bg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		.info {
			display: flex;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				// background: url(#{$baseImageUrl}/home/avatar.png) no-repeat;
				// background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				padding-left: 15rpx;
				box-sizing: border-box;
			}
		}

		.weather {
			height: 40rpx;
			padding: 0 30rpx 0;
			background: url(#{$baseImageUrl}/home/tq.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 50%;
				z-index: 2;
				transform: translate(-50%, -50%);
			}

			text {
				color: #553C36;
				font-size: 28rpx;
				font-weight: 400;
			}
		}
	}
</style>